import React from 'react'
import style from './style'
import cx from 'classnames'
/*import IconFont from '../iconFont'*/
import { IconFont } from 'sq-ui';
import util from '../../util'

export default ({ _, srcIcon,noHover, iconRotate, label, className, style:_style, active, size, icon, to, color, children, iconRight, src, width, onClose, ...others }) => {
	let styles = {}
	if (size) styles.fontSize = `${size}px`
  if (src) {
    styles = {
      ...styles,
      ...util.crop(src, width || 30),
      backgroundImage: `url(${src})`,
      width: `${width || 30}px`,
      height: `${width || 30}px`,
      display: 'block'
    }
  }
	return (
		<a 
			data-role="link"
			style={{...styles, ..._style}}
			href={to}
			className={cx({
				[className]: className,
        [style['no-hover']]: noHover,
				[style.root]: true,
				[style[color]]: !!color,
				[style.icon]: icon,
				[typeof active === 'string'? active: style.active]: !!active,
				[style.underline]: _
			})}
			{...others}
		>
			{
				icon? <IconFont rotate={iconRotate} color={color} size={size} value={icon}/>: null
			}
			{
				(srcIcon && !src)? <IconFont className={style.avatar} size={width} value={srcIcon} className={style['src-icon']}/>: null
			}
			{ 
				label? <span>{label}</span>: null
			}
			{
				iconRight? <IconFont rotate={iconRotate} color={color} size={size} value={iconRight}/>: null
			}
			{ 
				children? (typeof children === 'string'? <span>{children}</span>: children): null 
			}
		</a>
	)
}
